<template>
  <view class="search_pages">
    <!-- 顶部导航栏 -->
    <cu-custom bgColor="bgcolorfff" :isBack="true">
      <block slot="content">
        <view class="toptext">搜索</view>
      </block>
    </cu-custom>

    <!-- 历史搜索记录 -->
    <view class="search_li">
      <view>
        <text class="lg text-gray" :class="'cuIcon-search text_icon'"></text>
        <input type="text" v-model="text" @confirm="searchNew" :focus="true" />
      </view>
      <text @click="searchNew">搜索</text>
    </view>

    <!-- 搜索建议 -->
    <view class="search_contant" v-if="!list.length > 0">
      <view class="history">
        <view class="history_title">
          <text>历史记录</text>
          <image
            src="../../static/img/deletlist.png"
            mode="widthFix"
            @click="clearAllHistory"
            class="history_img"
          />
        </view>
        <view class="history_contain">
          <text
            v-for="(item, index) in searchList"
            :key="index"
            @click="historySearch(item)"
            >{{ item }}</text
          >
        </view>
      </view>

      <view class="hotSearch">
        <text>热门搜索</text>
        <view>
          <text
            v-for="(item, index) in hotSearch"
            :key="index"
            @click="hotSearchCon(item)"
            >{{ item.name }}</text
          >
        </view>
      </view>
    </view>

    <!-- 没有数据出现的提示 -->
    <!-- <view v-if="list.length == 0">暂无相关数据</view> -->
  </view>
</template>

<script>
import { hotClassify } from "../../api/api";
export default {
  data() {
    return {
      list: [],
      searchList: [],
      //历史搜索数据
      hotSearch: [], //热门搜索数据
      text: "", //输入框值
      lastCursor: "", //游标
      over: false,
      hotid: "",
      jumpSearchContant: "",
    };
  },
  async onLoad({ search }) {
    this.loadingflag = true;
    const res = await hotClassify();
    this.loadingflag = false;
    if (res[1].data.code === "000000") {
      this.hotSearch = res[1].data.list;
    }
  },
  onShow() {
    console.log(typeof uni.getStorageSync("search"));
    if (uni.getStorageSync("search").length !== 0) {
      this.searchList = JSON.parse(uni.getStorageSync("search"));
    } else {
      this.searchList = [];
    }
  },
  methods: {
    //热门搜索推荐
    hotSearchCon(item) {
      this.hotid = item.name;
      this.text = "";
      this.searchNew(true);
    },
    //历史记录搜索
    historySearch(item) {
      this.text = item;
      this.searchNew();
    },
    //开始搜索
    searchNew(hot = false) {
      if (hot == true) {
        //热门搜索不保留搜索记录
        uni.navigateTo({
          url: `/pages/findresults/findresults?&search=` + this.hotid,
        });
      } else {
        if (this.searchList.indexOf(this.text) == -1 && this.text !== "") {
          this.searchList.push(String(this.text));
          uni.setStorageSync("search", JSON.stringify(this.searchList));
        }
        uni.navigateTo({
          url: `/pages/findresults/findresults?search=${this.text}`,
        });
      }
    },
    clearAllHistory() {
      this.searchList = [];
      uni.setStorageSync("search", "");
    },
  },
};
</script>

<style lang="scss" scoped>
.search_pages {
  width: 100%;
  background-color: #fff;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
  .search_li {
    width: 100%;
    padding-top: 50rpx;
    padding-left: 32rpx;
    padding-right: 36rpx;
    padding-bottom: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-bottom: 2rpx solid rgba(245, 245, 245, 1);

    view {
      height: 64rpx;
      background: rgba(245, 245, 245, 1);
      border-radius: 32rpx;
      width: 594rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      > input {
        width: 100%;
        height: 100%;
        font-weight: 500;
        color: rgba(142, 142, 142, 1);
        font-size: 28rpx;
      }
    }

    > text {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(142, 142, 142, 1);
      padding-left: 35rpx;
      white-space: nowrap;
    }
  }
  .text_icon {
    font-size: 30rpx;
    padding-left: 30rpx;
    padding-right: 15rpx;
  }

  .search_contant {
    width: 100%;
    padding-left: 32rpx;

    .history {
      .history_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 32rpx;
        > text {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(36, 36, 36, 1);
          display: inline-block;
          padding-top: 34rpx;
          padding-bottom: 33rpx;
        }
        .history_img {
          width: 28rpx;
        }
      }
      .history_contain {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        > text {
          padding: 20rpx 27rpx;
          background: rgba(247, 247, 247, 1);
          border-radius: 32rpx;
          margin-right: 30rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(62, 62, 62, 1);
          margin-bottom: 26rpx;
        }
      }
    }

    .hotSearch {
      > text {
        display: inline-block;
        margin-top: 44rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(36, 36, 36, 1);
        display: inline-block;
        padding-bottom: 33rpx;
      }

      > view {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        > text {
          padding: 20rpx 27rpx;
          background: rgba(247, 247, 247, 1);
          border-radius: 32rpx;
          margin-right: 30rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(62, 62, 62, 1);
          margin-bottom: 26rpx;
        }
      }
    }
  }

  .waterfall_box {
    margin-top: 20rpx;
    width: 100vw;
    .waterfall_box_cen {
      margin-top: 28rpx;
    }
  }
}
</style>
